<template>
  <div class="swiper-gallery">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        swiperSlides: [{
          url: 'http://localhost:8080/static/img/wine2.jpg',
          smallUrl: 'http://localhost:8080/static/img/new5.jpg'
        }, {
          url: 'http://localhost:8080/static/img/wine4.png',
          smallUrl: 'http://localhost:8080/static/img/new4.jpg'
        }],
        swiperOption: {
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          spaceBetween: 10
        }
      },
      methods: {
      }
      mounted () {
      }
    }
  }
</script>
<style>
  .swiper-container {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
  }
  .swiper-slide {
      background-size: cover;
      background-position: center;
  }
  .gallery-top {
      height: 80%;
      width: 100%;
  }
  .gallery-thumbs {
      height: 20%;
      box-sizing: border-box;
      padding: 10px 0;
  }
  .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
  }
  .gallery-thumbs .swiper-slide-active {
      opacity: 1;
  }
</style>
